<template>
<div id="app">
  <el-card style="width: 80%;margin: auto">
    <div class="t1">
      <span>我的提问</span>
    </div>
    <div :title="item.problem" v-for="item in questions" :key="item.id" class="d2">
      <el-button plain style="float: right; border: 0" @click="del(item.id)">删除</el-button>
      <el-link style="margin-bottom: 10px; margin-top: 10px" @click="$router.push({path: '/front/question',query:{question: item,flag: 'per'}})">{{item.problem}}</el-link><br/>
      <span style="font-size: 10px; color: darkgray">回复数：{{ item.replyList.length }}</span>
      <span style="font-size: 10px; color: darkgray;float: right" v-if="item.replyList.length >= 1">{{ item.replyList[0].createtime }}</span>
      <br/>
      <hr/>
    </div>
  </el-card>
</div>
</template>

<script>
export default {
  name: "PersonQue",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      questions: {}
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      console.log(this.user.id)
      this.request.get("/question/findQueByUser", {
        params: {
          problem: this.problem,
          id: this.user.id
        }
      }).then(res => {
        console.log(res)
        this.questions = res
      })
    },
    del(id){
      this.$confirm('确定删除该提问吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.delete("/question/del?id=" + id).then(res => {
          if (res) {
            this.$message.success("删除成功")
            this.load()
          } else {
            this.$message.error("删除失败")
          }
        })
      });
    }
  }
}
</script>

<style scoped>
#app{
  padding-top: 20px;
  display:flex;
  flex-direction: column;  /* 按照列column(垂直方向)排列*/
  justify-content: center;
  align-items: center;
}
.t1{
  font-size: 20px;
  color: #409EFF;
  margin-top: 10px;
  margin-bottom: 10px;
  font-style:italic;
  text-decoration: underline;
}
</style>
